'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import { 
  MapPinIcon,
  PhoneIcon,
  EnvelopeIcon,
  GlobeAltIcon
} from '@heroicons/react/24/outline';

interface ContactInfo {
  id: string;
  type: 'wechat_group' | 'wechat_official' | 'qq_group' | 'email' | 'phone' | 'address';
  title: string;
  description?: string;
  content: string;
  qrCode?: string;
  isVisible: boolean;
  order: number;
}

const footerLinks = {
  quickLinks: [
    { label: '关于我们', href: '/about' },
    { label: '团队成员', href: '/members' },
    { label: '研究项目', href: '/projects' },
    { label: '新闻动态', href: '/news' },
  ],
  research: [
    { label: '移动机器人', href: '/research/mobile-robots' },
    { label: '机械臂', href: '/research/robotic-arms' },
    { label: '人工智能', href: '/research/ai' },
    { label: '计算机视觉', href: '/research/computer-vision' },
  ],
  resources: [
    { label: '学术论文', href: '/publications' },
    { label: '技术报告', href: '/reports' },
    { label: '开源项目', href: '/open-source' },
    { label: '合作机会', href: '/collaboration' },
  ]
};

// 获取联系方式对应的图标
const getContactIcon = (type: ContactInfo['type']) => {
  switch (type) {
    case 'address':
      return MapPinIcon;
    case 'phone':
      return PhoneIcon;
    case 'email':
      return EnvelopeIcon;
    case 'wechat_group':
    case 'wechat_official':
    case 'qq_group':
      return GlobeAltIcon;
    default:
      return GlobeAltIcon;
  }
};

// 获取联系方式的链接
const getContactHref = (contact: ContactInfo) => {
  switch (contact.type) {
    case 'phone':
      return `tel:${contact.content}`;
    case 'email':
      return `mailto:${contact.content}`;
    case 'address':
      return '#';
    default:
      return contact.content.startsWith('http') ? contact.content : '#';
  }
};

const socialLinks = [
  { 
    name: '微信公众号',
    icon: (
      <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
        <path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.456c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.314-8.596-6.314zM5.785 5.991c.642 0 1.162.529 1.162 1.18 0 .659-.52 1.188-1.162 1.188-.642 0-1.162-.529-1.162-1.188 0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18 0 .659-.52 1.188-1.162 1.188-.642 0-1.162-.529-1.162-1.188 0-.651.52-1.18 1.162-1.18zm5.34 2.867c-1.797-.052-3.746.512-5.28 1.786-1.72 1.428-2.687 3.72-1.78 6.22.942 2.453 3.666 4.229 6.884 4.229 2.453 0 4.731-.984 6.314-2.638.821-.857 1.4-1.851 1.4-2.985 0-2.015-1.717-3.612-3.732-3.612z"/>
      </svg>
    ),
    href: '#'
  },
  {
    name: '微博',
    icon: (
      <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
        <path d="M9.31 8.17c-2.63-.51-4.85.27-5.37 1.75-.52 1.48.42 3.25 3.05 3.76 2.63.51 4.85-.27 5.37-1.75.52-1.48-.42-3.25-3.05-3.76zM15.72 7.62c-.15-.04-.26-.08-.18-.31.17-.48.19-1.06.02-1.48-.41-.98-1.52-1.05-2.8-.23 0 0-.4.27-.3-.22.21-.96-.03-1.79-.67-2.01-1.41-.49-3.42.56-4.94 2.36C5.36 7.47 4.64 9.07 4.64 10.5c0 2.9 3.65 4.66 7.21 4.66 4.68 0 7.79-2.75 7.79-4.94 0-1.33-1.1-2.08-3.92-2.6z"/>
      </svg>
    ),
    href: '#'
  },
  {
    name: 'GitHub',
    icon: (
      <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
        <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/>
      </svg>
    ),
    href: '#'
  },
];

export default function Footer() {
  const [contacts, setContacts] = useState<ContactInfo[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchContacts();
  }, []);

  const fetchContacts = async () => {
    try {
      const response = await fetch('/api/contact');
      if (response.ok) {
        const data = await response.json();
        if (data.success) {
          setContacts(data.data);
        }
      }
    } catch (error) {
      console.error('Error fetching contacts:', error);
    } finally {
      setLoading(false);
    }
  };

  // 分离不同类型的联系方式
  const wechatContacts = contacts.filter(c => c.type === 'wechat_group' || c.type === 'wechat_official');
  const directContacts = contacts.filter(c => !['wechat_group', 'wechat_official'].includes(c.type));

  return (
    <footer className="bg-gray-900 text-white">
      <div className="container mx-auto px-4 py-12">
        {/* Main Footer Content */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          {/* Logo and Description */}
          <div className="lg:col-span-1">
            <div className="flex items-center space-x-3 mb-4">
              <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center">
                <span className="text-white font-bold text-lg">R</span>
              </div>
              <div>
                <h3 className="text-lg font-bold heading-font">机器人创新实验室</h3>
                <p className="text-sm text-gray-400">Robotics Innovation Lab</p>
              </div>
            </div>
            <p className="text-gray-300 text-sm mb-6 leading-relaxed">
              致力于机器人技术研发与创新，培养优秀的机器人工程师，推动科技进步。
            </p>
            
            {/* Social Links - 显示微信相关联系方式 */}
            <div className="flex space-x-4">
              {wechatContacts.map((contact) => (
                <a
                  key={contact.id}
                  href={getContactHref(contact)}
                  className="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center text-gray-400 hover:text-white hover:bg-blue-600 transition-all duration-200"
                  title={contact.title}
                >
                  <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.456c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.314-8.596-6.314zM5.785 5.991c.642 0 1.162.529 1.162 1.18 0 .659-.52 1.188-1.162 1.188-.642 0-1.162-.529-1.162-1.188 0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18 0 .659-.52 1.188-1.162 1.188-.642 0-1.162-.529-1.162-1.188 0-.651.52-1.18 1.162-1.18zm5.34 2.867c-1.797-.052-3.746.512-5.28 1.786-1.72 1.428-2.687 3.72-1.78 6.22.942 2.453 3.666 4.229 6.884 4.229 2.453 0 4.731-.984 6.314-2.638.821-.857 1.4-1.851 1.4-2.985 0-2.015-1.717-3.612-3.732-3.612z"/>
                  </svg>
                </a>
              ))}
              {/* 如果没有微信联系方式，显示默认的社交图标 */}
              {wechatContacts.length === 0 && socialLinks.map((social, index) => (
                <a
                  key={index}
                  href={social.href}
                  className="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center text-gray-400 hover:text-white hover:bg-blue-600 transition-all duration-200"
                  title={social.name}
                >
                  {social.icon}
                </a>
              ))}
            </div>
          </div>

          {/* Quick Links */}
          <div>
            <h4 className="text-lg font-semibold mb-4">快速链接</h4>
            <ul className="space-y-2">
              {footerLinks.quickLinks.map((link, index) => (
                <li key={index}>
                  <Link
                    href={link.href}
                    className="text-gray-300 hover:text-blue-400 transition-colors duration-200 text-sm"
                  >
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Research Areas */}
          <div>
            <h4 className="text-lg font-semibold mb-4">研究领域</h4>
            <ul className="space-y-2">
              {footerLinks.research.map((link, index) => (
                <li key={index}>
                  <Link
                    href={link.href}
                    className="text-gray-300 hover:text-blue-400 transition-colors duration-200 text-sm"
                  >
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Contact Info */}
          <div>
            <h4 className="text-lg font-semibold mb-4">联系我们</h4>
            {loading ? (
              <div className="space-y-3">
                <div className="animate-pulse flex space-x-2">
                  <div className="w-4 h-4 bg-gray-600 rounded"></div>
                  <div className="w-32 h-4 bg-gray-600 rounded"></div>
                </div>
                <div className="animate-pulse flex space-x-2">
                  <div className="w-4 h-4 bg-gray-600 rounded"></div>
                  <div className="w-28 h-4 bg-gray-600 rounded"></div>
                </div>
              </div>
            ) : (
              <ul className="space-y-3">
                {directContacts.map((contact) => {
                  const Icon = getContactIcon(contact.type);
                  return (
                    <li key={contact.id}>
                      <div className="flex items-start space-x-2 text-gray-300 text-sm">
                        <Icon className="w-4 h-4 mt-0.5 flex-shrink-0" />
                        <div className="leading-relaxed">
                          <div className="font-medium">{contact.title}</div>
                          {contact.description && (
                            <div className="text-xs text-gray-400 mt-1">{contact.description}</div>
                          )}
                          {contact.type === 'email' ? (
                            <a href={`mailto:${contact.content}`} className="hover:text-blue-400 transition-colors">
                              {contact.content}
                            </a>
                          ) : contact.type === 'phone' ? (
                            <a href={`tel:${contact.content}`} className="hover:text-blue-400 transition-colors">
                              {contact.content}
                            </a>
                          ) : (
                            <span>{contact.content}</span>
                          )}
                        </div>
                      </div>
                    </li>
                  );
                })}
                {/* 如果没有任何联系方式数据，显示提示信息 */}
                {contacts.length === 0 && (
                  <li>
                    <span className="text-gray-400 text-sm">暂无联系方式信息</span>
                  </li>
                )}
              </ul>
            )}
          </div>
        </div>

        {/* Bottom Section */}
        <div className="border-t border-gray-800 mt-12 pt-8">
          <div className="flex flex-col md:flex-row justify-between items-center">
            <div className="text-sm text-gray-400 mb-4 md:mb-0">
              © 2024 机器人创新实验室. 保留所有权利.
            </div>
            <div className="flex space-x-6 text-sm">
              <Link href="/privacy" className="text-gray-400 hover:text-blue-400 transition-colors">
                隐私政策
              </Link>
              <Link href="/terms" className="text-gray-400 hover:text-blue-400 transition-colors">
                使用条款
              </Link>
              <Link href="/sitemap" className="text-gray-400 hover:text-blue-400 transition-colors">
                网站地图
              </Link>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}